<template>
    <view>
        <custom :tap_refresh="refresh"><template #backText>金股兑换</template></custom>
        <navTabList ref="navTabList" :tab.sync="tab">
            <template #top>
                <view v-if="tab.cur == 'buy'">
                    <nFormItem title="可用金券" :value="myGoldCouponAmount"></nFormItem>
                    <nFormItem title="兑入金股" format="number" :data.sync="buy" field="gold_share_amount"></nFormItem>
                </view>
                <view v-else-if="tab.cur == 'sell'">
                    <nFormItem title="可用金股" :value="myGoldShareAmount"></nFormItem>
                    <nFormItem title="转出金股" format="number" :data.sync="sell" field="gold_share_amount"></nFormItem>
                    <nMenuItemTopBottom v-if="sell.form.gold_share_amount > 0" class_item="form-border-top" class_top="text-center"
                        class_bottom="text-df text-center margin-top-10">
                        <template #top>
                            <text class="flex-sub">到账提现红包</text>
                            <text class="flex-sub">到账消费红包</text>
                            <text class="flex-sub">到账期权</text>
                        </template>
                        <template #bottom>
                            <text class="flex-sub">{{sell.form.gold_share_amount | bc('mul', 0.3) | floor(2)}}</text>
                            <text class="flex-sub">{{sell.form.gold_share_amount | bc('mul', 0.4) | floor(2)}}</text>
                            <text class="flex-sub">{{sell.form.gold_share_amount | bc('mul', 0.3) | floor(2)}}</text>
                        </template>
                    </nMenuItemTopBottom>
                </view>
                <nFormButton :title="tab.list[tab.cur].title" :tap="resting"></nFormButton>
                <nBar :title="tab.list[tab.cur].title+'日志'" right_title="详细日志" :right_uri="'/user/asset/log?action_types=' + (
                        tab.cur == 'buy' ? '10,11,12,13,14,15' : '20,21,22,23,24,25'
                    )"></nBar>
            </template>
            <template #list="data">
                <nMenuItemTopBottom v-for="(info, key) in data.list">
                    <template #top>
                        <text class="text-df">{{info.order_no}}</text>
                        <text class="text-sm text-gray">{{info.created_at | dateFormat('yyyy-MM-dd hh:mm')}}</text>
                    </template>
                    <template #bottom>
                        <view :class="[info.order_status == 2 ? 'text-red': (
                             info.gold_share_remain_amount == 0 ? 'text-green' : 'text-nddyny'
                         ), 'text-df']">
                            <text class="cuIcon-form text-bold margin-right-10"></text>
                            <text>{{info.gold_share_remain_amount | floor}}</text>
                            <text class="margin-lr-6">/</text>
                            <text>{{info.gold_share_amount | floor}}</text>
                            <text v-if="info.gold_share_remain_amount != info.gold_share_amount" class="margin-left-10">({{info.gold_share_remain_amount | bc('sub', info.gold_share_amount)}})</text>
                        </view>
                        <view>
                            <text class="text-red" v-if="info.order_status == 2">{{info.cancel_date | dateFormat('yyyy-MM-dd')}}</text>
                            <button @tap="cancelDialog = info.order_id" v-if="info.order_status == 0" class="bg-nddyny cu-btn round sm margin-left-10">申请撤单</button>
                            <text v-if="info.order_status == 1" class="bg-green cu-tag margin-left-10">完成</text>
                            <text v-if="info.order_status == 2" class="bg-red cu-tag margin-left-10">撤单</text>
                        </view>
                    </template>
                </nMenuItemTopBottom>
            </template>
        </navTabList>
        <modalDialog :show.sync="cancelDialog" :confirm="cancel" content="确定要撤单">
        </modalDialog>
    </view>
</template>

<script>
    export default {
        data() {
            let buy_form = {
                order_type: 'buy',
                gold_share_amount: '',
            };
            let sell_form = {
                order_type: 'sell',
                gold_share_amount: '',
            };
            return {
                cancelDialog: false,
                tab: {
                    cur: 'buy',
                    list: {
                        buy: {
                            title: '兑入金股',
                            uri: '/user/orderGoldShare/myList',
                            data: {
                                order_type: 'buy',
                            }
                        },
                        sell: {
                            title: '转出金股',
                            uri: '/user/orderGoldShare/myList',
                            data: {
                                order_type: 'sell',
                            }
                        },
                    },
                    apiList: {}
                },
                buy: {
                    formtag: {},
                    form: this.$nddyny.object.copy(buy_form),
                    formbak: this.$nddyny.object.copy(buy_form),
                },
                sell: {
                    take_ratio: 0,
                    formtag: {},
                    form: this.$nddyny.object.copy(sell_form),
                    formbak: this.$nddyny.object.copy(sell_form),
                },
            }
        },
        onReady() {
            this.$refs.navTabList.listInit();
        },
        onReachBottom() {
            this.$refs.navTabList.listAdd();
        },
        computed: {
            myGoldCouponAmount() {
                let my_gold_coupon_amount = this.$nddyny.number.floor(this.$store.state.user.user_asset_info.gold_coupon_amount);
                if (!this.buy.form.gold_share_amount) {
                    return my_gold_coupon_amount;
                }
                return my_gold_coupon_amount +
                    ' - ' +
                    this.buy.form.gold_share_amount +
                    ' = ' + (this.$nddyny.bc.sub(my_gold_coupon_amount, this.buy.form.gold_share_amount));
            },
            myGoldShareAmount() {
                let my_gold_share_amount = this.$nddyny.number.floor(this.$store.state.user.user_asset_info.gold_share_amount);
                if (!this.sell.form.gold_share_amount) {
                    return my_gold_share_amount;
                }
                return my_gold_share_amount +
                    ' - ' +
                    this.sell.form.gold_share_amount +
                    ' = ' + (this.$nddyny.bc.sub(my_gold_share_amount, this.sell.form.gold_share_amount));
            }
        },
        methods: {
            refresh() {
                this.$refs.navTabList.listForceInit();
            },
            resting() {
                this.$api.post(this, {
                    loading: this.tab.list[this.tab.cur].title + '中',
                    url: '/user/orderGoldShare/resting',
                    data_append: this[this.tab.cur].form,
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result, this.tab.cur)) return;
                        this.$user.updateUserAssetInfo(this);
                        this[this.tab.cur].form = this.$nddyny.object.copy(this[this.tab.cur].formbak);
                        this.refresh();
                        this.$store.commit('userToastSuccess', this.tab.list[this.tab.cur].title + '成功');
                    }
                });
            },
            cancel() {
                this.$api.post(this, {
                    loading: '撤单中',
                    url: '/user/orderGoldShare/cancel',
                    data_append: {
                        order_type: this.tab.cur,
                        order_id: this.cancelDialog
                    },
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        this.$user.updateUserAssetInfo(this);
                        this.refresh();
                        this.cancelDialog = false;
                        this.$store.commit('userToastSuccess', '撤单成功');
                    }
                });
            }
        }
    }
</script>
